<template>
  <el-collapse-transition>
    <div class="searchBox" v-show="showSearch">
      <div class="search">
        <avue-form
          :option="searchOption"
          v-model="searchParam"
          ref="form"
          v-if="column && column.length > 0"
        >
          <!-- 表单项插槽 -->
          <!-- <template
        :slot="item.prop"
        slot-scope="scope"
        v-for="item in [...columnSlotList, ...customFormSlots]"
      > -->
          <template
            v-for="item in [...columnSlotList, ...customFormSlots]"
            #[item.prop]="scope"
          >
            <component
              v-if="item.isCustom"
              v-model="searchParam[scope.column.prop]"
              :is="item.component"
              :key="item.component + '-customSlots'"
              rulesType="int"
            />
            <slot
              v-else
              v-bind="scope"
              :searchParam="searchParam"
              :row="searchParam"
              :name="item.name"
            ></slot>
            <!-- <el-input
          v-model="searchParam[scope.column.prop]"
          :key="item.name"
          @input="inputChange($event, scope)"
        ></el-input> -->
            <!-- <span :key="item.name">{{ scope }}</span> -->
          </template>

          <div class="btn" slot="menuForm">
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="searchChange"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="searchReset"
              >重置</el-button
            >
          </div>
        </avue-form>
      </div>
    </div>
  </el-collapse-transition>
</template>

<script>
import config from '../../config'

/**
 * 搜索栏组件
 */
export default {
  name: 'OceSearch',
  components: {},
  props: {
    /**
     * 是否显示搜索栏
     */
    showSearch: {
      type: Boolean,
      default: () => true,
    },
    /**
     * 组件配置属性，详情见下面Option属性
     */
    option: {
      type: Object,
      default: () => {},
    },
    /**
     * 项目列配置，继承form组件column属性所有字段，独有属性详情见下面Column属性
     */
    column: {
      type: Array,
    },
    // 自定义插槽映射表
    searchCustomSlotMap: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  data() {
    return {
      searchParam: {},
      searchParamCreate: false,
    }
  },
  watch: {
    searchParam: {
      handler(val) {
        if (this.searchParamCreate) this.setVal()
      },
      deep: true,
    },
  },
  computed: {
    // 表单列
    searchColumn() {
      let searchColumn =
        this.column.filter((item) => {
          if (item.search) {
            item.display = true
            item.formslot = item.searchslot
            item.labelWidth = item.searchLabelWidth
            item.span = this.$ocean.vaildData(
              item.searchSpan,
              config.search.searchSpan
            )
            item.placeholder = item.searchPlaceholder
          }
          return item.search
        }) || []
      return searchColumn
    },
    // 表单配置
    searchOption: function () {
      let option = Object.assign({}, this.option, {
        column: this.searchColumn,
        submitBtn: false,
        emptyBtn: false,
        menuSpan: this.$ocean.vaildData(
          this.option?.searchMenuSpan,
          config.search.searchMenuSpan
        ),
      })
      // this.setFormDefault(searchColumn)
      return option
    },
    // 插槽列表
    columnSlotList() {
      const slotList = []
      let slotName
      let tempSlot
      this.searchColumn.forEach((search) => {
        slotName = `search-${search.prop}`
        if (this.$scopedSlots[slotName]) {
          tempSlot = {
            name: slotName,
            label: search.label,
            prop: search.prop,
            type: 'search-item',
          }
          slotList.push(tempSlot)
        }
      })
      return slotList
    },
    // 自定义类型表单项
    customFormSlots() {
      // console.log('自定义插槽映射表', this.searchCustomSlotMap)
      const slotList = Object.keys(this.searchCustomSlotMap)
      const clumnSlotList = this.columnSlotList.map((el) => el.prop)
      return this.searchColumn.filter((search) => {
        const isCustom =
          slotList.includes(search.searchType) &&
          !clumnSlotList.includes(search.prop)
        if (isCustom) {
          search.component =
            this.searchCustomSlotMap[search.searchType].mapComponent
          search.isCustom = isCustom
        }
        return isCustom
      })
    },
    // columnSlotList: function () {
    //   let columnSlotList = this?.searchOption?.column.filter(
    //     (item) => item.searchslot
    //   )
    //   return columnSlotList || []
    // },
  },
  created() {
    // this.setVal();
    // this.searchParamCreate = true;
    this.$nextTick(() => {
      this.$refs?.form?.setVal()
      this.setVal()
      this.searchParamCreate = true
    })
  },
  mounted() {},
  methods: {
    inputChange(val, scope) {
      scope.value = val
      // console.log(val, scope)
    },
    // 设置默认值
    setFormDefault() {
      const searchColumn = this.searchOption.column
      searchColumn.forEach((el) => {
        let value = this.searchParam[el.prop]
        if (this.$ocean.validatenull(value) || value == '')
          this.searchParam[el.prop] = el.value || ''
      })
    },
    searchChange() {
      /**
       * 点击搜索触发事件
       */
      this.$emit('search-change', this.searchParam)
    },
    /**
     * 清空搜索内容
     * @public
     */
    searchReset() {
      this.$refs.form.resetForm()
      this.$nextTick(() => {
        this.$emit('search-reset')
        this.setFormDefault()
      })
      // this.$emit('search-reset')
    },
    setVal() {
      /**
       * v-mode
       * @property {Object}
       */
      this.$emit('input', this.searchParam)
      /**
       * v-mode
       * @property {Object}
       */
      this.$emit('change', this.searchParam)
    },
  },
}
</script>

<style lang="scss" scoped>
.searchBox {
  width: 100%;
}
.search {
  width: calc(100% - 8px);
  border: 1px #dcdfe6 solid;
  border-radius: 8px;
  padding: 8px 0;
  margin: 4px;
  background: #fff;

  ::v-deep .el-form-item {
    // 清除默认盒子模型
    margin-bottom: 0;
  }

  ::v-deep .avue-form__row {
    padding: 8px 16px !important;
  }

  ::v-deep .avue-form__menu {
    padding: 8px 2px !important;
    .el-button--mini {
      // font-size: 14px;
    }
  }

  .btn {
    height: 100%;
  }
}
</style>
